<template>
  <div class="energyRecord">
    <div class="record">
      <!-- 搜索框 -->
      <div class="search">
        <div class="rightSearch">
        <el-select v-model="rentFeeWay" placeholder="请选择支付方式">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            class="elInput"
            placeholder="请输入租金Huifu订单号"
            clearable
            prefix-icon="el-icon-search"
            v-model="rentFeeHuifuOrder"
          >
          </el-input>
          <el-input
            class="elInput"
            placeholder="请输入表号"
            clearable
            prefix-icon="el-icon-search"
            v-model="meterNumber"
          >
          </el-input>
<!--       
      <el-date-picker
            :picker-options="pickerOptions"
            @change="change"
            :clearable="false"
            v-model="time"
            type="monthrange"
            align="center"
            range-separator="-"
            start-placeholder="开始"
            end-placeholder="结束"
            value-format="yyyy-MM"
          >
          </el-date-picker> -->
          <!-- 两种不同实践方式 -->
         <!-- <el-date-picker
            clearable
            @blur="time_blur"
            style="width: 330px;"
            v-model="time"
            @change="change"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>  -->

          <!-- <el-button
            type="primary"
            @click="out"
            :disabled="tableData.length !== 0 ? false : true"
            >导出</el-button
          > -->
          <el-button type="primary" icon="el-icon-search" @click="search"
            >搜索</el-button
          >
        </div>
      </div>
      <!-- 表格数据 -->
      <div class="table">
        <el-table
          :show-overflow-tooltip="true"
          :data="tableData"
          ref="isExpand"
          height="calc(100%-10rem)"
          v-loading="loading"
          border
          highlight-current-row
          stripe
          style="width: 100%"
        >
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column align="center" width="200" prop="createTime"  label="创建时间">
          </el-table-column>
          <el-table-column align="center" width="200"  prop="rentFeeTime" label="支付时间">
          </el-table-column>
          <el-table-column align="center" width="200"  prop="meterName" label="表名称">
            <template slot-scope="scope">
              <el-popover
                placement="top"
                trigger="hover"
                :content=" scope.row.meterName"
              >
                <span slot="reference" class="twoLineCls">{{
                 scope.row.meterName
                }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" width="150"  prop="meterNumber" label="表号">
          </el-table-column>
          <el-table-column align="center" prop="rentFeeHuifuOrder" label="订单号">
          </el-table-column>

          <el-table-column align="center" width="150"  prop="rentFeeAmount" label="收入">
          </el-table-column>
          <el-table-column align="center" width="150" prop="rentFeeFullAmount" label="充值金额">
          </el-table-column>
          <el-table-column align="center" prop="rentFeeWay" width="150" label="充值方式">
            <template slot-scope="scope">
              <el-popover
                placement="top"
                trigger="hover"
                :content=" scope.row.rentFeeWay== 3 ? '微信':'支付宝'"
              >
                <span slot="reference" class="twoLineCls">{{
                  scope.row.rentFeeWay== 3 ? '微信':'支付宝'
                }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="process" label="充值结果" width="150">
            <template slot-scope="scope">
              <el-popover
                placement="top"
                trigger="hover"
                :content=" scope.row.process==2 ? '支付完成' :'暂无' "
              >
                <span slot="reference" class="twoLineCls">{{
                 scope.row.process==2 ? '支付完成' :'暂无'
                }}</span>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          v-show="tableData.length !== 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 30, 50, 70, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getQuantitiesRecordApi, quantitiesOutApi } from "../../api/rent";
import { getOrzApi } from "../../api/orz";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      meterType: 1,
      options: [
        {
          label: "微信",
          value: 3
        },
        {
          label: "支付宝",
          value: 4
        }
      ],
      time: "",
      startDate: "",
      endDate: "",
      meterName: "",
      meterNumber: "",
      meterAddress: "",
      orzId: "",
      pageNum: 1,
      pageSize: 10,
      total: null,
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "orzName"
      },
      tableData: [],
      loading: false,
      rentFeeHuifuOrder:'',
      queryCreateTime:'',
      rentFeeOrder:'',
      rentFeeWay:''
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getOrz();
    this.getTime();
    this.getQuantities(
      this.pageNum,
      this.pageSize,
  this.queryCreateTime,
  2,
  this.rentFeeHuifuOrder,this.rentFeeOrder,this.rentFeeWay,this.meterNumber
    );
  },
  methods: {
    out() {
      let loading = this.$loading({
        lock: true,
        text: "正在导出..."
      });
      quantitiesOutApi(
        this.pageNum,
        this.pageSize,
        this.startDate,
        this.endDate,
        "",
        this.meterName,
        this.meterNumber,
        this.meterAddress,
        this.orzId,
        this.meterType
      )
        .then(res => {
          if (
            res.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          ) {
            let blob = new Blob([res], { type: "application/octet-stream" });
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download", "能耗报表.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    input() {
      this.pageNum = 1;
      this.search();
    },
    search() {
      this.getQuantities(
        this.pageNum,
        this.pageSize,
        this.queryCreateTime,
        2,
        this.rentFeeHuifuOrder,
        this.rentFeeOrder,
        this.rentFeeWay,this.meterNumber
      );
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    getMonthDays(year, month) {
      var thisDate = new Date(year, month, 0); //当天数为0 js自动处理为上一月的最后一天
      return thisDate.getDate();
    },
    // getTime() {
    //   let year = new Date().getFullYear();
    //   let month = new Date().getMonth() + 1;
    //   if (month < 10) {
    //     month = "0" + month;
    //   }
    //   let last = this.getMonthDays(year, month);
    //   let date1 = `${year}-${month}-01`;
    //   let date2 = `${year}-${month}-${last}`;
    //   this.time = [date1, date1];
    //   this.startDate = date1;
    //   this.endDate = date2;
    // },
    getTime() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let last = this.getMonthDays(year, month);
      let date1 = `${year}-${month}-01`;
      let date2 = `${year}-${month}-${last}`;
      // this.time = [date1, date1];
      this.time = [date1, date2];
      this.startDate = date1;
      this.endDate = date2;
    },
    // 时间选择器失去焦点触发方法
    time_blur() {
      console.log("失去交电", this.startDate, this.endDate);
    },
    change() {
      // console.log("e", e);
      console.log("this.time", this.time);
      if (this.time != null) {
        this.startDate = this.time[0];
        this.endDate = this.time[1];
        console.log("时间变化了", this.time);
      } else {
        this.getTime();
      }
      this.pageNum = 1;
      // this.search();
    },
    // 获取记录
    getQuantities(
      pageNum,
      pageSize,
      queryCreateTime,
      process,
      rentFeeHuifuOrder,
      rentFeeOrder,
      rentFeeWay,meterNumber
    ) {
      this.loading = true;
      getQuantitiesRecordApi(
        pageNum,
        pageSize,
        queryCreateTime,
        process,
        rentFeeHuifuOrder,
        rentFeeOrder,
        rentFeeWay,meterNumber
      ).then(res => {
        if (res.code == 200) {
          this.loading = false;
          this.tableData = res.data.rows;
          this.total = res.data.total;
        }
      });
    },
    // 电表分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.search();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.orzName.indexOf(value) !== -1;
    },
    getOrz() {
      getOrzApi().then(res => {
        if (res.code == 200) {
          this.treeData = [
            {
              orzName: "全部",
              orzId: "",
              children: [...res.data]
            }
          ];
        }
      });
    },
    handleNodeClick(e) {
      this.orzId = e.orzId;
      this.pageNum = 1;
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.energyRecord {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);
  display: flex;
  justify-content: space-around;

  .record {
    // width: 100%;
    // height: 90%;
    padding: 1%;
    background: #fff;
    .search {
      margin-bottom: 1%;

      .rightSearch {
        display: flex;
        // justify-content: space-around;
        align-items: center;
        width: 100%;
        .el-select {
          width: 15%;
          margin-right: 10px;
        }
        .elInput {
          width: 15%;
          margin-right: 10px;
        }
        .el-date-editor {
          width: 20%;
          margin-right: 10px;
        }
      }
    }
    .table {
      height: 75%;

      .el-table {
        height: 100%;
      }

      .el-pagination {
        text-align: center;
        margin-top: 20px;
      }
    }
  }
  .previewDialog {
    .el-dialog {
      height: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .el-dialog__body {
        height: 90%;
      }
    }
  }
}
</style>
<style>
.twoLineCls {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* line-clamp: 1;  */
  -webkit-box-orient: vertical;
}
</style>
